<template>
  <div id="LeftNavbar" class="leftNavbar">
    <el-menu :default-active="activeNav" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="false">

    <el-menu-item-group title="订单中心">
      <el-menu-item index="/member/orders"><nuxt-link to='/member/orders'><span>·</span> 我的订单</nuxt-link></el-menu-item>
    <el-menu-item index="/member/orderComments"><nuxt-link to='/member/orderComments'><span>·</span> 我的评价</nuxt-link></el-menu-item>
  </el-menu-item-group>
  <el-menu-item-group title="我的收藏">
    <el-menu-item index="/member/collect"><nuxt-link to='/member/collect'><span>·</span> 商品收藏</nuxt-link></el-menu-item>
    <el-menu-item index="/member/collectFactory"><nuxt-link to='/member/collectFactory'><span>·</span> 云工厂收藏</nuxt-link></el-menu-item>
  </el-menu-item-group>
  <el-menu-item-group title="账户设置">
    <el-menu-item index="/member/setup"><nuxt-link to='/member/setup'><span>·</span> 账号信息</nuxt-link></el-menu-item>
    <el-menu-item index="/member/address"><nuxt-link to='/member/address'><span>·</span> 收货地址</nuxt-link></el-menu-item>
   <el-menu-item index="/member/invoice"><nuxt-link to='/member/invoice'><span>·</span> 发票设置</nuxt-link></el-menu-item>
  </el-menu-item-group>

</el-menu>
  </div>

</template>

<script>
export default {
  components: {

  },
  data() {
    return {
      liData:{
          list:[{
            name: '首页',
            url: ''
          },{
            name: '全部商品',
            url: ''
          },{
            name: '线下网点',
            url: ''
          },{
            name: '五金工具',
            url: ''
          },{
            name: '家装建材',
            url: ''
          },{
            name: '手动工具',
            url: ''
          }]
        },
        activeConfig: ['/member/orders',
          '/member/orderComments',
          '/member/collect',
          '/member/collect/factoryIndex',
          '/member/setup',
          '/member/setup/address',
          '/member/setup/invoice',
        ],
        activeNav: null,
    }
  },
  props: [],
  watch: {
    '$route'(route) {
      this.activeNav = route.path
    }
  },
  created() {
    if(process.browser){
      for (var index in this.activeConfig) {
        if('/mallplus'+this.activeConfig[index] == window.location.pathname){
          this.activeNav = this.activeConfig[index]
        }
      }
    }

  },
  methods: {
    handleOpen(key, keyPath) {
           console.log(key, keyPath);
         },
         handleClose(key, keyPath) {
           console.log(key, keyPath);
         }
  }
}
</script>

<style lang="scss">
#LeftNavbar{
  width: 180px;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
    min-height: 400px;
  }
  .el-menu-item-group__title {
    padding-left: 30px !important;
    padding-top: 30px;
    width: 200px;
    line-height: normal;
    font-size: 16px;
    color: #333333;
    font-family:PingFang-SC-Heavy;
    font-weight:800;
  }
  .el-menu-item-group .el-menu-item {
    font-size: 14px;
    color: #888888;
    padding-top: 0;
    padding-left: 55px !important;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    -webkit-transition: border-color .3s,background-color .3s,color .3s;
    transition: border-color .3s,background-color .3s,color .3s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    span{
      font-size: 30px;
      display: inline-block;
      height: 20px;
      line-height: 15px;
    }
  }
  .el-menu-item a{
    color: #888;
    display: block;
    text-decoration: none;
  }
  .el-menu-item.is-active a{
    color: #255B8B;
  }
}

.el-menu-item-group .el-menu-item-group__title {
  display: block;
}

</style>
